<template>
	<view class="follow-view">
		<van-tabs
			title-active-color="#3e9df8"
			line-width="80px"
			color="#3e9df8"
			title-inactive-color="#7d7e80"
			swipeable
			:ellipsis="false"
			:lock-scroll="true"
			:active="state.active"
			@click="switchCate"
		>
			<van-tab title="我的收藏" name="我的收藏"></van-tab>
			<van-tab title="我的历史" name="我的历史"></van-tab>
		</van-tabs>
		<view class="content">
			<view class="collect-list">
				<view
					class="item"
					v-for="(item, index) in collectList"
					:key="index"
					@click="goArticleDetails(item.uid)"
				>
					<view class="title">
						<text>{{ item.tatle }}</text>
					</view>
					<view class="image" v-if="item.wztp">
						<image
							v-for="(image, i) in item.wztp"
							:key="i"
							:src="image"
							mode=""
						></image>
					</view>
					<view class="operate">
						<view class="left">
							<text>{{ item.name }}</text>
							<text class="active"> {{ item.pl }} 评论</text>
							<text class="active"> {{ dayjs(item.time).format('YYYY-MM-DD') }}</text>
						</view>
					</view>
					<view class="item-bottom">
						<view class="item">
							<van-icon name="comment-o" />
							<text>{{ item.pl }}</text>
						</view>
						<view class="item">
							<van-icon name="like-o" />
							<text>{{ item.sq }}</text>
						</view>
						<view class="item">
							<van-icon name="share-o" />
							<text>分享</text></view
						>
					</view>
					<view class="split"></view>
				</view>
				<!-- <view class="finished-text">没有更多了</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs } from 'vue'
import { collectionApi, historyApi } from '../../api/modules/article'
import { UserStore } from '../../store/user.js'
import dayjs from 'dayjs'
const userStore = UserStore()
const state = reactive({ active: '我的收藏', collectList: [] })

const getCollect = async () => {
	const { data } = state.active === '我的历史' ? await historyApi() : await collectionApi()
	state.collectList = data.data
}
const switchCate= e => {
	const name = e.detail.title
	state.active = name
	getCollect()
}
const goArticleDetails = uid => {
	const id = userStore.info.id
	uni.navigateTo({
		url: `/subpkg/details-article/details-article?uid=${uid}&id=${id}`
	})
}
// 页面加载
onLoad(message => {
	state.active = message.active
	getCollect()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { collectList } = toRefs(state)
</script>

<style lang="scss">
.follow-view {
	.content {
		background-color: #f5f7f9;
		min-height: calc(100vh - 88rpx);
		border-top: 1px solid #ccc;
		.collect-list {
			.item {
				background-color: #fff;
				.title {
					display: flex;
					align-items: baseline;
					justify-content: space-between;
					text {
						font-size: 32rpx;
						font-weight: 500;
						color: #3a3a3a;
						letter-spacing: 1px;
						font-stretch: normal;
						padding: 16rpx 24rpx;
						flex-basis: 70%;
						text-align: left;
					}
				}
				.image {
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx;
					image {
						width: 33.33%;
						height: 146rpx;
						border-radius: 2px;
					}
				}
				.operate {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					padding: 16rpx 24rpx;
					border-bottom: 1rpx solid #edeff3;
					color: #cfcfcf;
					box-sizing: border-box;
					.left {
						color: #999;
						font-size: 24rpx;
						.active {
							margin-left: 20rpx;
						}
					}
				}
				.item-bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					background-color: #fff;
					color: #333;
					font-size: 28rpx;
					.item {
						cursor: pointer;
						width: 33.33%;
						height: 90rpx;
						text-align: center;
						line-height: 90rpx;
						border-right: 1rpx solid #ececec;
						.van-icon {
							text-align: center;
							color: rgb(51, 51, 51);
							font-size: 36rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
			.split {
				height: 20rpx;
				background-color: #f5f7f9;
			}
		}
		.finished-text {
			color: #969799;
			font-size: 26rpx;
			line-height: 100rpx;
			text-align: center;
		}
	}
}
</style>
